<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}AI故事生成系统{% endblock %}</title>

    {% load static %}
    {% load user_tags %}
    <link href="{% static 'admin/js/dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'admin/font/bootstrap-icons.min.css' %}" rel="stylesheet">
    <script src="{% static 'admin/js/jquery-3.7.1.js' %}"></script>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4cc9f0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4CAF50;
            --info-color: #2196F3;
            --warning-color: #ff9800;
            --danger-color: #f44336;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            padding: 12px 0;
        }
        
        .navbar-brand {
            font-weight: bold;
            color: white !important;
            font-size: 1.5rem;
            letter-spacing: 0.5px;
        }
        
        .navbar-nav .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .navbar-nav .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        
        .user-welcome {
            color: white !important;
            font-weight: 500;
        }
        
        .main-content {
            min-height: calc(100vh - 130px);
            padding: 30px 0;
        }
        
        /* 按钮样式 */
        .btn {
            border-radius: 6px;
            padding: 8px 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* 卡片样式 */
        .card {
            border: none;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transform: translateY(-5px);
        }
        
        /* 页脚样式 */
        .footer {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px 0;
            margin-top: 40px;
        }
        
        .footer a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
        }
        
        .footer a:hover {
            color: white;
        }
        
        /* 用户头像 */
        .user-avatar {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* 表单样式 */
        .form-control, .form-select {
            border-radius: 8px;
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(67, 97, 238, 0.25);
        }
        
        /* Alert样式 */
        .alert {
            border-radius: 10px;
            border: none;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-book me-2"></i>AI故事创作平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    {% if user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'story:list' %}">
                            <i class="bi bi-collection me-1"></i> 故事列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'story:create' %}">
                            <i class="bi bi-pencil-square me-1"></i> 创作故事
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'story:ranking' %}">
                            <i class="bi bi-trophy me-1"></i> 排行榜
                        </a>
                    </li>
                    {% endif %}
                </ul>
                <ul class="navbar-nav">
                    {% if user.is_authenticated %}
                        <li class="nav-item d-flex align-items-center me-3">
                            <span class="user-welcome">欢迎，{{ user.username }}</span>
                        </li>
                    <li class="nav-item d-flex align-items-center me-3">
                        {% if user.profile and user.profile.avatar %}
                            <img src="{{ user.profile.avatar.url }}" alt="头像" class="rounded-circle user-avatar me-2">
                        {% else %}
                            <img src="{% static 'admin/img/tx.png' %}" alt="默认头像" class="rounded-circle user-avatar me-2">
                        {% endif %}
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'user:profile' %}">
                            <i class="bi bi-person me-1"></i> 个人中心
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'user:logout' %}">
                            <i class="bi bi-box-arrow-right me-1"></i> 退出
                        </a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'user:login' %}">
                            <i class="bi bi-box-arrow-in-right me-1"></i> 登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'user:register' %}">
                            <i class="bi bi-person-plus me-1"></i> 注册
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container main-content">
        {% if messages %}
        <div class="messages mb-4">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {% if message.tags == 'success' %}
                <i class="bi bi-check-circle-fill me-2"></i>
                {% elif message.tags == 'info' %}
                <i class="bi bi-info-circle-fill me-2"></i>
                {% elif message.tags == 'warning' %}
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                {% elif message.tags == 'error' %}
                <i class="bi bi-x-circle-fill me-2"></i>
                {% endif %}
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% block content %}{% endblock %}
    </div>

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>关于我们</h5>
                    <p>AI故事创作平台致力于为创作者提供智能写作辅助工具，激发创意灵感，探索文学创作的无限可能。</p>
                </div>
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/"><i class="bi bi-house-door me-2"></i>首页</a></li>
                        <li><a href="{% url 'story:create' %}"><i class="bi bi-pencil-square me-2"></i>创作故事</a></li>
                        <li><a href="{% url 'story:list' %}"><i class="bi bi-collection me-2"></i>故事列表</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-envelope me-2"></i>contact@aistory.com</li>
                        <li><i class="bi bi-telephone me-2"></i>400-800-8888</li>
                        <li><i class="bi bi-geo-alt me-2"></i>程序猿星码农国牛马市小菜鸡村</li>
                    </ul>
                </div>
            </div>
            <hr class="mt-4 mb-4" style="border-color: rgba(255,255,255,0.2);">
            <div class="text-center">
                <p class="mb-0">&copy; 2025 AI故事创作平台. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="{% static 'admin/js/dist/js/bootstrap.bundle.min.js' %}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html> 